import { Component } from '@angular/core';
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
import { } from '@angular/animations/animations'
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('box', [
      // 定义一个状态left
      state('true', style({
        display: 'block'
      })),
      // 定义另外一个状态right
      state('false', style({
        display: 'none'
      })),
      // 定义运动过程(从left到right状态)
      transition('true=>false', animate(1000, keyframes([ 
        style({
          display: 'none'
        }) 
      ]))),
      // 定义运动过程(从right到left)
      transition('false=>true', animate(1000, keyframes([ 
        style({
          display:'block'
        }) 
      ]))),
    ])
  ]
})
export class AppComponent {
  title = 'app';

  // 定义开始的状态
  private boxState: boolean = false;

  start(): void {
    this.boxState = !this.boxState;
  }
}
